<template>
    <div>
        <header class="head-nav">
            <el-row>
                <el-col :span="16">
                    <el-menu class="el-menu-demo"
                             mode="horizontal" unique-opened router>
                        <el-menu-item index='home' @click='goHome'>
                            首页
                        </el-menu-item>
                        <el-submenu
                                :index="item.path"
                                v-for='(item,index) in $router.options.routes'
                                v-if='!item.hidden && (($store.state.user.userinfo.access_status===1 && $store.state.user.userinfo.web_routers[item.path]) || $store.state.user.userinfo.access_status!==1)'>
                            <template slot='title'>{{item.name}}</template>
                            <el-menu-item
                                    :index='item.path+subItem.path'
                                    :route='subItem'
                                    v-for='subItem in item.children'
                                    v-if='!subItem.hidden'
                                    >
                                    {{subItem.name}}
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-col>
                <el-col :span="8" class="userinfo" style="float:right">
                    <el-dropdown class='menu-tip'
                        @command='turnToOrder'>
                        <el-badge :value='total'>
                            <span><i class='icon-bell'></i>提醒</span>
                        </el-badge>
                        <el-dropdown-menu slot='dropdown' class='dropdown-tip'>
                            <el-dropdown-item command='news'>新订单<i v-show='newOrders'>{{newOrders}}</i></el-dropdown-item>
                            <el-dropdown-item command='emptyBarrel'>待处理空桶<i v-show='emptyBarrel'>{{emptyBarrel}}</i></el-dropdown-item>
                            <el-dropdown-item command='deposite'>押金订单<i v-show='deposite'>{{deposite}}</i></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span class='username'>
                        <el-dropdown
                                trigger="click"
                                @command='setDialogInfo'>
                            <span class="el-dropdown-link" style='color:#475669;font-size:1px;'>
                                <i class='authen'></i>{{this.$store.state.user.userinfo.name}}<i
                                    class="el-icon-caret-bottom el-icon--right"
                                    style='color:#99a9bf;'></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command='modify'>修改密码</el-dropdown-item>
                                <el-dropdown-item command='out'>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                </el-col>
            </el-row>
        </header>

        <!-- <messages></messages> -->

        <el-dialog
            title='提示'
            :visible.sync='dialogVisible'
            :before-close='duplicateLogin'>
            <span>您的账号在其他页面被登录</span>
            <span slot='footer'>
                <el-button @click='duplicateLogin'>确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
	import HeadNavJs from './HeadNav.js';
	export default HeadNavJs;
</script>

<style scoped lang='less'>
    .logo-container {
        height: 60px;
    }

    .logo {
        height: 50px;
        width: auto;
        margin-left: 10px;
        margin-top: 5px;
    }

    .fa-user {
        position: relative;
        top: -2px;
        margin-right: 4px;
    }

    .head-nav {
        width: 100%;
        min-width: 650px;
        height: 60px;
        background: #EFF2F7;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 99;
        color: #FFF;
        //border-bottom: 1px solid #1F2D3D;

    .logout {
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        float: right;
        cursor: pointer;
    }

    }
    .userinfo {
        text-align: right;
    }

    .username {
        height: 60px;
        margin-right: 30px;
        line-height: 60px;
        cursor: pointer;

        .el-dropdown {
            font-size: 16px;
            color: #99A9BF;
        }
    }
    .icon-bell {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 5px;
        vertical-align: bottom;
        background: url(../../../assets/bell.png) center no-repeat;
        background-size: contain;
    }
    .menu-tip {
        margin-right: 40px;
    }
    .dropdown-tip li{
        position: relative;
        width: 120px;
        font-size: 14px;
        i {
            position: absolute;
            top: 50%;
            right: 10px;
            padding: 0px 6px;
            color: #fff;
            font-size: 12px;
            font-style: normal;
            text-align: center;
            line-height: 17px;
            background: red;
            transform: translateY(-50%);
            border-radius: 10px;
        }
    }
    .authen {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 5px;
        margin-bottom: -10px;
        background: url(../../../assets/authen.png) center no-repeat;
        background-size: contain;
    }
</style>
